<template>
    <div class="common-layout">
       <el-container>
           <el-header class="header_activate">
                <h1>{{ type_cn }}</h1>
               <div class="search_activate" id="top_position"> 
                   <el-input v-model="state.input_user" placeholder="请输入手机/真名" />
                   <el-button type="warning" :icon="Search" @click="searchUserApplicationHandle"></el-button> 
               </div>
               <div class="filter">
                   <el-dropdown @command="handleTimeCommand">
                       <span class="el-dropdown-link">
                           时间筛选
                       <el-icon class="el-icon--right">
                           <arrow-down />
                       </el-icon>
                       </span>
                       <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="0" >不限</el-dropdown-item>
                                <el-dropdown-item command="7">近7天</el-dropdown-item>
                                <el-dropdown-item command="15">近15天</el-dropdown-item>
                                <el-dropdown-item command="30">近30天</el-dropdown-item>
                                <el-dropdown-item command="90" disabled>近90天</el-dropdown-item>
                                <el-dropdown-item command="180" divided>近半年</el-dropdown-item>                           
                            </el-dropdown-menu>
                       </template>
                   </el-dropdown>
               </div>
               <div class="filter">
                   <el-dropdown @command="handleStatusCommand">
                       <span class="el-dropdown-link">
                           处理筛选
                       <el-icon class="el-icon--right">
                           <arrow-down />
                       </el-icon>
                       </span>
                       <template #dropdown>
                       <el-dropdown-menu>
                            <el-dropdown-item command="0" >全部</el-dropdown-item>
                            <el-dropdown-item command="1" disabled>未付款</el-dropdown-item>
                            <el-dropdown-item command="2" disabled>已付款</el-dropdown-item>
                            <el-dropdown-item command="3" divided>取消</el-dropdown-item>                           
                       </el-dropdown-menu>
                       </template>
                   </el-dropdown>
               </div>
           </el-header>
           <el-divider />
           <el-main>
               <el-table class="tableClass" :data="state.applicationList" stripe                   
                   :header-cell-style="{ background: '#eef1f6', color: '#606266' }"                    
                    border
               > 
                   <el-table-column type="index" width="45" label="序" />
                   <el-table-column width="90" property="user_info.real_name" label="姓名" />
                   <el-table-column width="125" property="user_info.phone" label="手机" />
                   <el-table-column width="200" property="order_id" label="订单号" />
                   <el-table-column width="60" property="amount" label="金额"/>
                   <el-table-column width="120" property="add_date" label="日期" show-overflow-tooltip />
                   <el-table-column width="80" property="status_cn" label="状态" />
                   <el-table-column width="80" property="remarks" label="备注" show-overflow-tooltip />                  
                   <el-table-column align="center" width="90" label="操作" >                        
                       <template #default="scope"> 
                           <el-tooltip
                           class="box-item"
                           effect="dark"
                           content="批准支付"
                           placement="top"
                           >
                               <el-icon style="width: 1em; height: 1em; margin-right: 10px" @click="handleUpdateLogClick(scope.row.id,2)">
                                   <Select />
                               </el-icon>
                           </el-tooltip>
                           <el-tooltip
                           class="box-item"
                           effect="light"
                           content="取消订单"
                           placement="top"
                           >
                               <CloseBold style="width: 1em; height: 1em;" @click="handleUpdateLogClick(scope.row.id,3)" />
                           </el-tooltip>
                       </template>
                   </el-table-column>
               </el-table>
               <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
               <el-pagination
               background
               layout="total, pre, pager, next"
               :total="state.total"                
               :page-size="state.pageSize"            
               @current-change="handleCurrentChange"
               />
           </el-main>           
       </el-container>
   </div>
</template>
 
<script setup>
import { Search, Document, ArrowDown, Select, CloseBold } from '@element-plus/icons-vue'
import {onMounted,  reactive, toRefs, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'

const props = defineProps({
    type_cn:String,
    getLogAPI:String,
    updateLogAPI:String,
  });

const state = reactive({
   input_user: '',
   status: 0,
   days: 0,
   applicationList: [],
   total: 0, // 总条数
   currentPage: 1, // 当前页
   pageSize: 10, // 分页大小
})
// 获取所有联考卷申请表
const getLog=()=>{
   let params = {     
       days: state.days,
       status: state.status,
       real_name: state.input_user,
       page: state.currentPage,
       size: state.size,
   }
   axios.get(props.getLogAPI, {params}).then(res => {
       if (res.code==200){
           console.log("列表：", res)
           state.applicationList = res.data.results
           state.total = res.total
       }else{       
           console.log("获取失败", res.message)
       }
   })
   .catch((error)=>{
       console.log("获取错误：", error)
   })
}

onMounted(() => {
    getLog()
})
//处理按钮点击，设置查询的参数为天数
const handleTimeCommand=(command=0)=>{
   state.days = parseInt(command)
   getLog()
}
// 处理按钮点击，设置查询的参数为订单状态
const handleStatusCommand=(command=0)=>{
   state.status = parseInt(command)
   getLog()
}
// 处理按钮点击，设置查询的参数为真实姓名或者手机
const searchUserApplicationHandle=()=>{
   getApplicationsBySearch()
}

// 批准通过，修改订单为已付款
const handleUpdateLogClick=(id, status)=>{
   // console.log("处理同意")
   let params = {
       id: parseInt(id),       
       status: status,
       days: state.days,        
   }
   axios.patch(props.updateLogAPI, params).then(res => {
       if (res.code==200){
           // console.log("申请列表：", res)
           ElMessage.success("操作成功！")
           getLog()
            scrollToTop()           
       }else if(res.code==1022){
           ElMessage.error("此操作没必要！")
        }        
       else{
            ElMessage.error("此操作没必要！")
           console.log("error", res)
       }
   })
   .catch((error)=>{
       console.log("获取数据错误：", error)
   })
}

// 滚到顶端
const scrollToTop=()=>{
   document.querySelector('#top_position').scrollIntoView(true);
}
//点击页码时触发
const handleCurrentChange = (newPage)=>{
   state.currentPage = newPage 
   getLog()
   scrollToTop()
 }
</script>

<style scoped>
 .search_activate {
   display: flex;
   flex-flow: row nowrap;
   /* justify-content: space-between; */
   align-items: center;
   margin: 0 auto;
   height: 30px;
 }
 .header_activate{
   display: flex;
   flex-flow: row nowrap;
   justify-content:space-evenly;
   align-items: center;
   padding: 0px;
   height: 30px;
   width:800px;
 }
 span{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: medium;
 }
 .tableClass .cell{   
   padding: 0!important;
   height: 20px!important;
   line-height: 20px!important;
   text-align: center;
   font-size: 10px;
 }
</style>